<template>
  <el-card class="box-card" style="margin:10px;">
    <div slot="header" class="clearfix">
      <el-row>
        <el-col :span="20">
          <div style="font-size:22px" align="left">
            <h1 style="font-size: 24px;color: #409eff;">{{ routeData.name }}</h1>
          </div>
        </el-col>
        <el-col :span="4">
          <div align="right">
            <el-button size="small" type="primary" icon="el-icon-back" @click="back">返回</el-button>
          </div>
        </el-col>
      </el-row>
    </div>
    <iframe ref="iframe" width="100%" :height="windowHeight" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no" allowtransparency="yes" :src="src" />
  </el-card>
</template>
<script>
export default {
  data() {
    return {
      src: 'http://127.0.0.1',
      windowHeight: document.documentElement.clientHeight - 200,
      loading: false,
      routeData: this.$route.params
    }
  },
  mounted() {
    this.formConfig = this.routeData.content || ''
    window.onresize = () => {
      this.windowHeight = document.documentElement.clientHeight - 200
    }
    this.getFormUrl()
    window.addEventListener('message', this.handleMessage)
  },
  destroyed() {
    window.removeEventListener('message', this.handleMessage)
  },
  methods: {
    getFormUrl() {
      this.$axios.get(this.basePortalUrl + '/system/getById/' + this.routeData.systemId)
        .then(res => {
          // this.src = (res.data.data.formUrl || this.src) + '?templateId=' + this.routeData.id + '&token=' + localStorage.getItem('token')
          this.src = (res.data.data.formUrl || this.src)
        }).catch(() => {
          this.loading = false
          this.$message.error('获取模板列表失败')
        })
    },
    handleMessage(res) {
      if (res && res.data && res.data.key) {
        if (res.data.key === 'formTemplateData') {
          this.handleSave(res.data.msg)
        } else if (res.data.key === 'formEditPageLoaded') {
          this.$refs.iframe.contentWindow.postMessage({ key: 'formTemplateEditData', data: this.routeData.content }, '*')
        }
      }
    },
    handleSave(res) {
      if (res) {
        var params = {
          'content': JSON.stringify(res),
          'id': this.routeData.id
        }
        this.$axios.put(this.baseFormUrl + '/template/updateContent',
          params
        ).then(res => {
          if (res && res.data && res.data.code === 200) {
            this.$message.success('保存成功啦~')
            this.back()
          } else {
            this.$message.error((res && res.data && res.msg) ? res.data.msg : '保存失败')
          }
        }).catch(() => {
          this.$message.error('保存失败！')
        })
      }
    },
    back() {
      var params = {
        'itemId': this.routeData.itemId,
        'itemName': this.routeData.itemName,
        'currentPage': this.routeData.currentPage,
        'pageSize': this.routeData.pageSize,
        'itemCurrentPage': this.routeData.itemCurrentPage,
        'itemPageSize': this.routeData.itemPageSize,
        'templateId': this.routeData.id
      }
      this.$router.push({ name: 'templateList', params: params })
    }
  }
}
</script>
